import { createRoot } from 'react-dom/client';
import { ApolloProvider } from '@apollo/client';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { client } from './utils/apollo';
import './index.css';
import UserInfo from './components/UserInfo';
import { routes } from './routers/menus';
import Layout from './components/Layout';
import Login from './pages/Login';
import 'dayjs/locale/zh-cn'; // 将dayjs 中文化
import { ROUTE_COMPONENT } from './routers';

createRoot(document.getElementById('root')!).render(
  <ApolloProvider client={client}>
    {/* 国际中文化 */}
    <ConfigProvider locale={zhCN}>
      <BrowserRouter>
        <UserInfo>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={<Layout />}>
              {
              routes.map((item) => {
                const Component = ROUTE_COMPONENT[item.key];
                return (
                  <Route
                    path={item.path}
                    key={item.path}
                    element={<Component />}
                  />
                );
              })
            }
            </Route>
          </Routes>
        </UserInfo>
      </BrowserRouter>
    </ConfigProvider>
  </ApolloProvider>,
);
